<template>
    <div class="hook">
        <h2>使用 hoook 渲染子元素</h2>
        <template v-for="item in list">
            <div
                v-if="canMounted(item.frame)"
                :key="item.id"
                class="hook-frame"
            >
                {{ item.name }}
            </div>
        </template>
    </div>
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import useFrame from '@/hooks/useFrame'
const { canMounted } = useFrame()
const list = shallowRef(
    new Array(1000).fill(null).map((_, index) => {
        return {
            id: index + 1,
            name: `${window
                .range(0, Math.pow(10, 6))
                .toString(16)} name-${index}`,
            frame: index * 500,
        }
    })
)
</script>
<style lang="scss" scoped>
.hook {
}
</style>
